<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="robots" content="nofollow,noindex,noarchive">
    <meta name="hotcss" content="max-width=0">
    <title>邮票查询验证</title>
</head>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th,
    td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
        text-align: center;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .code {
        color: rgb(0, 0, 0);
        white-space: pre-wrap;
        padding-top: 0.682667rem;
        padding-bottom: 1.024rem;
        text-align: center;
        width: 100%;
        font-size: .93867rem;
        font-weight: 700;
    }

    .img {
        padding: 10px;
    }

    img {
        width: 100%;
    }
</style>

<body>
    <div>
        <div class="code"></div>
        <div class="img">
            <img style="display: block;" />
        </div>
        <div class="info">

        </div>
    </div>
</body>

</html>
<script>
    async function init_info(hash) {
        try {
            let rsp_info = await fetch("list/" + hash + "/info.txt", {
                headers: {
                    'Cache-Control': 'no-cache'
                }
            });

            if (!rsp_info.ok) {
                return;
            }
            let info_txt = await rsp_info.text();
            let args = info_txt.split("\r\n");
            let index = 0;
            if (args[0].split(/[:：]/).length < 2) {
                index = 1;
                document.querySelector(".code").innerHTML = args[0];
            }

            let html = ['<table>'];
            html.push('<thead>');
            html.push('<tr>');
            html.push('<th colspan=2>基本信息</th>');

            html.push('</tr>');
            html.push('</thead>');
            html.push('<tbody>');
            for (let i = index; i < args.length; i++) {
                let k_v = args[i].split(/[:：]/);
                if (k_v.length >= 2) {
                    html.push('<tr>');
                    html.push('<td>' + k_v[0] + '</td>');
                    html.push('<td>' + k_v[1] + '</td>');
                    html.push('</tr>');
                }
            }

            html.push('</tbody>');
            html.push('</table>');

            let node = document.createElement("div");
            node.innerHTML = html.join("");
            document.querySelector(".info").append(node.children[0]);
        } catch (e) {

        }
    }
    async function init_image(hash) {
        try {
            let rsp_info = await fetch("list/" + hash + "/image.jpg", {
                headers: {
                    'Cache-Control': 'no-cache'
                }
            });
            let doc = document.querySelector(".img img");
            if (!rsp_info.ok) { 
                doc.style.display = "none"
                return;
            }
            let blob = await rsp_info.blob();
            document.querySelector(".img img").src = URL.createObjectURL(blob);
        } catch (e) {

        }
    }
    let hash = location.hash.replace("#", "");
    if (hash) {
        init_info(hash);
        init_image(hash);
    }
</script>